<template>
  <view class="container">
    <view class="listGrid">
      <view class="imgCard"
            v-for="(item,index) in allList"
            :key="item">
        <view class="panel">
          <image class="card-img"
                 :src="item.img_src"
                 mode="aspectFill"
                 @tap="lookPhoto(item.img_src,index)">
          </image>

        </view>

      </view>
      <view v-if="!ifAll"
            class="lastTip">加载中...
      </view>
      <view v-else
            class="lastTip">已经到底了
      </view>
    </view>
  </view>

</template>

<script>
import {
  huihuiList,
  minminList,
  panpanList,
  fengjingList,
  foodList,
  susheList,
  qiuyanList,
  qiuqiuList,
  jingjingList,
  jiangyingList,
} from "../../static/photoData/photoList";
export default {
  data() {
    return {
      allList: [],
      fetchPageNum: 1,
      ifAll: false,
      name: "",
      list: [],
    };
  },
  onLoad(e) {
    console.log(e);
    this.name = e.type;
    let list = [];
    console.log("名字", this.name);
    if (this.name == "潘潘") {
      list = panpanList;
    }
    if (this.name == "慧慧") {
      list = huihuiList;
    }
    if (this.name == "敏敏") {
      list = minminList;
    }
    if (this.name == "风景") {
      list = fengjingList;
    }
    if (this.name == "美食") {
      list = foodList;
    }
    if (this.name == "小窝") {
      list = susheList;
    }
    if (this.name == "秋燕") {
      list = qiuyanList;
    }
    if (this.name == "秋秋") {
      list = qiuqiuList;
    }
    if (this.name == "江荧") {
      list = jiangyingList;
    }
    if (this.name == "静静") {
      list = jingjingList;
    }
    this.list = list;
    this.getData();
  },
  onReachBottom() {
    console.log("滑动到页面底部");
    this.getData();
  },
  methods: {
    lookPhoto(src, index) {
      uni.navigateTo({
        url:
          "/pages/photo/photo?src=" +
          src +
          "&nowIndex=" +
          index +
          "&type=" +
          this.name,
      });
    },
    getData() {
      if (this.fetchPageNum * 8 > this.list.length) {
        let tempList = this.list.slice(0, this.list.length);
        this.allList = tempList;
        this.fetchPageNum++;
        this.ifAll = true;
        console.log("************", this.allList);
      } else {
        let tempList = this.list.slice(0, this.fetchPageNum * 8);
        this.allList = tempList;
        this.fetchPageNum++;
        console.log("************", this.allList);
      }
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
  flex: 1;
  width: 750rpx;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.listGrid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}
.imgCard {
  position: relative;
  width: 100%;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
  flex: 0 0 50%;
  max-width: 50%;
}
.lastTip {
  display: flex;
  width: 100%;
  margin-bottom: 30upx;
  justify-content: center;
}
</style>
